import React from 'react';
import './index.css';

class Toolbar extends React.Component{
    render(){
        const { rainStyle, radarStyle, liveStyle, preStyle, changeToolType, changeToolState } = this.props;
        return (
            <div className='toolbar'>
                <ul className={rainStyle ? "ulnone rain active" : "ulnone rain"} onClick={() => changeToolType("rain")}>
                    <li></li>
                    <li>降雨</li>
                </ul>
                <div className='splitline'></div>
                {
                    liveStyle && <ul className={radarStyle ? "ulnone radar active" : "ulnone radar"} onClick={() => changeToolType("radar")}>
                        <li></li>
                        <li>雷达</li>
                    </ul>
                }
                {
                    preStyle && <ul className="ulnone radar-disable">
                        <li></li>
                        <li>雷达</li>
                    </ul>
                }
                <div className='condition ulnone'>
                    <ul className='innerbox'>
                        <li className={liveStyle ? 'live active' : 'live'} onClick={() => changeToolState('live')}>实</li>
                        <li className='line'></li>
                        <li className={preStyle ? 'predict active' : 'predict'} onClick={() => changeToolState('pre')}>预</li>
                    </ul>
                </div>
            </div>
        )
    }
}

export default Toolbar;